<template>
  <div class="room-card-list" :style="{height:scrollHeight+'px'}">
    <template v-if="orderList.length > 0">
      <room-card v-for="order in orderList" :roomData="order" :key="order.houseId"></room-card>
    </template>
    <template v-else>
      <div>{{ $t('message.noData') }}</div>
    </template>
  </div>
</template>
<script>
import RoomCard from '@/views/house/status/module/RoomCard'
export default {
  name: 'RoomList',
  components: {
    RoomCard
  },
  props: {
    orderList: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data () {
    return {
      fullHeight: '', // 浏览器窗口高度
      scrollHeight: '' // 滚动窗口高度
    }
  },
  watch: {
    // 页面整体高度
    fullHeight (val) {
      if (!this.timer) {
        this.fullHeight = val
        this.timer = true
        const that = this
        setTimeout(function () {
          that.timer = false
        }, 400)
      }
    }
  },
  methods: {
    setScrollHeight () {
      const overHeight = 280 // 需要减掉的高度
      window.onresize = () => {
        return (() => {
          window.fullHeight = document.documentElement.clientHeight
          this.fullHeight = window.fullHeight
          this.scrollHeight = this.fullHeight - overHeight
        })()
      }
      this.$nextTick(() => {
        this.fullHeight = document.documentElement.clientHeight
        this.scrollHeight = this.fullHeight - overHeight
      })
    }
  },
  mounted () {
    this.setScrollHeight()
  }
}
</script>
<style lang="less" scoped>
.room-card-list {
  width: auto;
  min-width: 1440px;
  padding: 10px;
  overflow-y: scroll;
  display:flex;
  flex-wrap: wrap;
}
</style>
